@import '../bootstrap'
@import '../theme'

/* Themes */
list($material)
  background: $material.cards

  .list__tile:not(.list__tile--active)
    color: $material.text.primary

  .list__tile__sub-title
    color: $material.text.secondary

  .subheader
    color: $material.text.secondary

  .divider
    background-color: $material.dividers

theme(list, "list")

.list
  list-style-type: none
  padding: $list-top-padding 0 $list-bottom-padding
  transition: height .4s $transition.fast-out-slow-in

  .input-group
    margin: 0

  > .list__tile ~ .list__tile
    margin-top: 0

  &__tile
    font-size: $list-tile-font-size
    font-weight: $list-tile-font-weight
    display: flex
    width: $list-item-single-height
    text-decoration: none
    padding: 16px 0
    margin: 0
    transition: $primary-transition
    position: relative
    user-select: none

    &:after
      content: ''
      position: absolute
      left: 0
      top: 0
      width: 1px
      opacity: 0
      height: 100%
      transition: $primary-transition
      background-color: $material-twelve-percent-dark

    &--link
      cursor: pointer

    &--link:hover, &--highlighted
      background: $material-twelve-percent-dark

    &__content,
    &__action,
    &__avatar
      width: 100%

    &__title, &__sub-title
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      width: 100%

    &__title
      transition: $primary-transition
      width: 24px
      line-height: 24px
      position: relative
      text-align: left

    &__sub-title
      font-size: $list-sub-title-font-size

    .avatar
      justify-content: flex-start
      min-height: 56px

    &__action
      display: flex
      justify-content: flex-start
      min-height: 56px

      .input-group
        padding: 0

      .input-group__details
        display: none

      .icon
        transition: $primary-transition

      .btn //fix button padding if used
        padding 0
        margin 0
        &--icon
          margin -8px

      &-text
        color: $list-action-text-font-color
        font-size: $list-action-text-font-size

      &--stack
        align-items: flex-end
        justify-content: space-between
        padding-top: $list-top-padding
        padding-bottom: $list-bottom-padding
        white-space: nowrap
        flex-direction: column

    &__content
      text-align: left
      flex: 0 1 100%
      overflow: hidden
      display: flex
      align-items: flex-start
      justify-content: center
      flex-direction: column

      ~ .avatar
        justify-content: flex-end

      ~ .list__tile__action:not(.list__tile__action--stack)
        justify-content: flex-end

    &--active
        color: $list-tile-active-color

    &--disabled
      opacity: 0.4 !important
      pointer-events: none

    &--avatar
      width: $list-item-avatar-single-height

      .avatar
        img,
        .icon
          height: 40px
          width: 40px

  &--dense
    padding-top: $list-item-dense-top-padding
    padding-bottom: $list-item-dense-top-padding

    .subheader
      font-size: $subheader-dense-font-size
      height: $list-dense-subheader-height
    .list--group
      .subheader
        width $list-dense-subheader-group-height
    .list__tile
      font-size: $list-item-dense-font-size

      &--avatar
        width: $list-item-dense-avatar-single-height

      &:not(.list__tile--avatar)
        width: $list-item-dense-single-height

      .icon
        font-size: $list-item-dense-icon-font-size

    .list__tile__sub-title
      font-size: $list-item-dense-font-size

  &--two-line
    .list__tile
      width: $list-item-double-height

    &.list--dense
      .list__tile
        width: $list-item-dense-double-height

  &--three-line
    .list__tile
      width: $list-item-triple-height

    .list__tile__sub-title
      white-space: initial
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
      display: -webkit-box

    &.list--dense
      .list__tile
        width: $list-item-dense-triple-height

  &--group
    position: relative
    padding: 0

    &:after
      content: ''
      position: absolute
      left: 0
      bottom: 0
      height: 1px
      opacity: 0
      width: 100%
      background-color: $material-twelve-percent-dark

    .list__tile
      padding-left: $list-item-left-padding

    .list__tile--active
      .list__tile__title
        color: $theme.primary

    &__header
      > li:first-child
        cursor: pointer

        &:hover
          background: $material-twelve-percent-dark

      + .list--group
        &:after
          opacity: 1

      &--active
        .list__tile
          background: $material-twelve-percent-dark

          &:after
            opacity: 1

          .list__tile__title
            color: inherit

          .list__tile__action:last-of-type
            .icon
              transform: rotate(-180deg)

      &--no-action + .list--group
        .list__tile
          padding-left: $list-left-padding

  &--subheader
    padding-top: 0

  &.list--two-line,
  &.list--three-line
    .list__tile__avatar
      align-items: flex-start
      padding-top: 6px
